<template>
  <card-layout title="方量计算" bg="3" class="chart" v-loading="statistcsLoading">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="volume-calculation">
      <el-form :model="form" label-width="auto">
        <el-form-item label="矢量范围">
          <div class="form-btns">
            <el-button size="small" @click="drawRange">绘制范围</el-button>
            <!-- <el-button size="small">使用矿区范围</el-button> -->
            <el-dropdown>
              <el-button style="margin-left: 12px" size="small">
                范围导入
                <el-icon class="el-icon--right">
                  <ArrowDown />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>GeoJSON</el-dropdown-item>
                  <el-dropdown-item>KML文件</el-dropdown-item>
                  <el-dropdown-item>Shapfile文件</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-form-item>
        <el-form-item label="计算类型">
          <el-radio-group v-model="form.type">
            <el-radio :value="1"> 区域挖方 </el-radio>
            <el-radio :value="2"> 两期挖方 </el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="sketch">
          <img src="@/assets/images/sketch.png" />
          <div class="label">区域挖方示意图</div>
        </div>
        <template v-if="form.type == 1">
          <el-form-item label="挖方数据">
            <el-select v-model="firstValue" filterable placeholder="请选择" @change="changeFirstValue">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="挖方深度">
            <el-radio-group v-model="form.maxDepth">
              <el-radio :value="1"> 最大深度 </el-radio>
              <el-radio :value="2"> 区域最低点 </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="首期数据">
            <el-select v-model="twoFirstValue" filterable placeholder="请选择" @change="changeTwoFirstValue">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="二期数据">
            <el-select v-model="twoSecondValue" filterable placeholder="请选择" @change="changeTwoSecondValue">
              <el-option v-for="item in secondOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="">
          <div class="form-btns">
            <el-button v-if="form.type == 1" type="primary" size="small" plain @click="startStatistics">开始分析</el-button>


            <template v-else>
              <!-- <el-button type="primary" size="small" plain @click="startSingleStatistics">分析单个模型</el-button> -->
              <el-button type="primary" size="small" plain @click="startTwoStatistics">对比分析</el-button>
            </template>
          </div>
        </el-form-item>
      </el-form>
      <div class="calc-result">
        <div class="stratum-stats">
          <div class="title">
            <div>分析结果</div>
            <div class="unit">单位：万方</div>
          </div>
          <div class="chart-container" ref="pieChartRef" v-show="hasData"></div>
          <div class="no-data-box" v-show="!hasData">
            暂无分析数据
          </div>
        </div>
        <div class="stratum-stats table">
          <el-table :data="tableData" size="small" :max-height="200" style="width: 100%">
            <el-table-column prop="name" align="center" label="岩层" />
            <el-table-column prop="value" align="center" label="方量(立方米)" />
            <el-table-column prop="rate" align="center" label="占比" />
            <!-- <el-table-column
              prop="value"
              align="center"
              v-if="form.type == 2"
              label="区域内剩余"
            /> -->
            <!-- <el-table-column prop="address" label="剩余" /> -->
          </el-table>
        </div>
      </div>
      <div class="form-btns footer">
        <el-button type="primary" @click="generateReport">生成报告</el-button>
        <el-button>模型分析</el-button>
        <el-button>关闭</el-button>
      </div>
    </div>
    
    <!-- 报告预览弹窗 -->
    <ReportPreviewDialog v-model="showReportDialog" />
  </card-layout>
</template>

<script setup>
import useChart from "@/hooks/useCharts.js";
import { ElMessage } from "element-plus";
import { calculateLayerDataDifference } from '@/utils/different.js';
import ReportPreviewDialog from './ReportPreviewDialog.vue';

const pieChartRef = ref(null);
let { chartInstance } = useChart(pieChartRef);

const props = defineProps({
  modelEditorInstance: {
    type: Object,
    required: true,
  },
});

const form = ref({
  name: "",
  type: 1,
  maxDepth: 1,
});

const hasData = ref(false);
const showReportDialog = ref(false);

const emits = defineEmits(["close", 'loadModel']);
const firstValue = ref('1593');
// const options = [
//   {
//     value: "0",
//     label: "原始地质模型数据",
//   },
//   {
//     value: "1",
//     label: "2025-01-21无人机数据",
//   },
//   {
//     value: "2",
//     label: "2025-02-16无人机数据",
//   },
//   {
//     value: "3",
//     label: "2025-03-07无人机数据",
//   },
//   {
//     value: "4",
//     label: "2025-04-12无人机数据",
//   },
//   {
//     value: "5",
//     label: "2025-05-06无人机数据",
//   },
//   {
//     value: "6",
//     label: "2025-06-08无人机数据",
//   },
// ];

const options = [
  {
    value: "1593",
    label: "初始ID"
  },
  {
    value: "1619",
    label: "一期ID"
  },
  {
    value: "1410",
    label: "二期ID"
  },
  {
    value: "1603",
    label: "终了ID"
  }
]
const changeFirstValue = (val) => {
  emits('loadModel', val);
  tableData.value = []
  hasData.value = false
  chartInstance.value.clear()
}

// 计算第二个下拉框的可选项
const secondOptions = computed(() => {
  if (!twoFirstValue.value) return []
  
  const firstIndex = options.findIndex(item => item.value === twoFirstValue.value)
  if (firstIndex === -1) return []
  
  // 返回第一个选择之后的所有选项
  return options.slice(firstIndex + 1)
})

// 两期对比
const twoFirstValue = ref('')
const twoSecondValue = ref('')
const changeIng = ref('')
const changeTwoFirstValue = (val) => {
  emits('loadModel', val);
  tableData.value = []
  hasData.value = false
  chartInstance.value.clear()
  twoSecondValue.value = ''
  changeIng.value = 'first'
}
const changeTwoSecondValue = (val) => {
  emits('loadModel', val);
  tableData.value = []
  hasData.value = false
  chartInstance.value.clear()
  changeIng.value = 'two'
}

// 先分析单个模型，存储起来
let firstStatistics = null;
let secondStatistics = null;
const statistcsLoading = ref(false)
// 分析单个模型
const startSingleStatistics = async () => {
  if(!isDrawing.value){
    ElMessage.error('请先绘制范围');
    return;
  }
  statistcsLoading.value = true

  isDrawing.value = false;
  let res = await props.modelEditorInstance.startStatistics();
  statistcsLoading.value = false

  changeIng.value === 'first' ? firstStatistics = res.layerData : null
  changeIng.value = 'two' ? secondStatistics = res.layerData : null

  // if (firstStatistics) {
  //   secondStatistics = res.layerData;
  // } else{
  //   firstStatistics = res.layerData;
  // }
}

// 两个模型进行对比计算
const startTwoStatistics = async () => {
  // console.log(firstStatistics, secondStatistics,'开始对比');
  
  // if (!firstStatistics || !secondStatistics) {
  //   ElMessage.error('需要分析两个模型才可以进行对比');
  //   return;
  // }

  // const layerData = calculateLayerDataDifference(firstStatistics, secondStatistics)
  // hasData.value = true
  // tableData.value = layerData.map(item => {
  //   return {
  //     name: item.name,
  //     value: item.volume,
  //     rate: (parseFloat(item.volProp) * 100).toFixed(2) + '%'
  //   }
  // });

  // nextTick(() => {
  //   initChart(tableData.value);
  // })
  // console.log(firstStatistics, secondStatistics,'分析完成');


  
  if(!twoFirstValue.value || !twoSecondValue.value){
    ElMessage.error('请先选择并分析两个模型');
    return;
  }
 emits('loadModel', '1595');

 const coordinates = [
  [117.307440022225805, 30.238486714868323],
  [117.312267406382077, 30.247234320593275],
  [117.317249279289456, 30.248819004867496],
  [117.325436, 30.246754],
  [117.323978, 30.244839],
  [117.322558746355313, 30.245675885596082],
  [117.317178863931261, 30.23983464318335],
  [117.307440022225805, 30.238486714868323]
];
 function convertToECEF(coordArray) {
  const flatArray = coordArray.flat();
  return Cesium.Cartesian3.fromDegreesArray(flatArray);
 }
 const ecefCoordinates = convertToECEF(coordinates);
//  console.log(ecefCoordinates,'ecefCoordinatesecefCoordinatesecefCoordinates');
 
 statistcsLoading.value = true
 let res = await props.modelEditorInstance.startStatistics(ecefCoordinates);
 statistcsLoading.value = false
 const { layerData } = res
  hasData.value = true
  tableData.value = layerData.map(item => {
    return {
      name: item.name,
      value: item.volume,
      rate: (parseFloat(item.volProp) * 100).toFixed(2) + '%'
    }
  });

  nextTick(() => {
    initChart(tableData.value);
  })
}

// 生成报告
const generateReport = () => {
  showReportDialog.value = true;
}


// const tableData = ref([
//   {
//     rate: "8.39%",
//     name: "水泥用灰岩",
//     value: "10.8",
//   },
//   {
//     rate: "43.35%",
//     name: "溶剂用白云岩",
//     value: "54.8",
//   },
//   {
//     rate: "22.31%",
//     name: "建筑用灰岩",
//     value: "28.2",
//   },
//   {
//     rate: "25.95%",
//     name: "电石用灰岩",
//     value: "32.8",
//   },
// ]);

const tableData = ref([])


// 绘制区域
const isDrawing = ref(false);
const drawRange = () => {
  isDrawing.value = true;
  props.modelEditorInstance.selectPoints();
}

// 开始分析
const startStatistics = async () => {
  statistcsLoading.value = true
  let res = await props.modelEditorInstance.startStatistics();
  statistcsLoading.value = false
  if(!isDrawing.value){
    ElMessage.error('请先绘制范围');
    return;
  }
  isDrawing.value = false;

  // const res = {
  //   "layerData": [
  //     {
  //       "name": "B3熔剂用白云岩矿",
  //       "volume": "233127.1892",
  //       "volProp": "0.0412",
  //       "thickness": "9.5426",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "夹_1建筑用灰岩矿",
  //       "volume": "32849.8625",
  //       "volProp": "0.0058",
  //       "thickness": "3.4225",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "夹_Ⅰ电石用石灰岩矿_1",
  //       "volume": "218064.0325",
  //       "volProp": "0.0386",
  //       "thickness": "32.9705",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "3建筑用灰岩矿",
  //       "volume": "2410025.2773",
  //       "volProp": "0.4261",
  //       "thickness": "85.7687",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "夹_B1熔剂用白云岩矿",
  //       "volume": "16060.8596",
  //       "volProp": "0.0028",
  //       "thickness": "18.3293",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "4建筑用灰岩矿",
  //       "volume": "421546.2202",
  //       "volProp": "0.0745",
  //       "thickness": "15.6366",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "B2熔剂用白云岩矿",
  //       "volume": "594473.4627",
  //       "volProp": "0.1051",
  //       "thickness": "18.0430",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "夹_8建筑用灰岩矿",
  //       "volume": "0.0000",
  //       "volProp": "0.0000",
  //       "thickness": "0.0000",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "夹_3建筑用灰岩矿_B1_1",
  //       "volume": "403.6722",
  //       "volProp": "0.0001",
  //       "thickness": "29.0169",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "Ⅰ电石用石灰岩矿",
  //       "volume": "1291633.8232",
  //       "volProp": "0.2284",
  //       "thickness": "72.4004",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "Ⅲ熔剂用白云岩矿",
  //       "volume": "19847.3601",
  //       "volProp": "0.0035",
  //       "thickness": "5.4671",
  //       "faultNum": 0
  //     },
  //     {
  //       "name": "夹_Ⅱ电石用石灰岩矿_6",
  //       "volume": "417396.2376",
  //       "volProp": "0.0738",
  //       "thickness": "45.4079",
  //       "faultNum": 0
  //     }
  //   ],
  //   "continuousPropData": [
  //     {
  //       "name": "网格平均厚度",
  //       "value_max": "130.696",
  //       "value_min": "0.000"
  //     },
  //     {
  //       "name": "网格最大Z值",
  //       "value_max": "258.294",
  //       "value_min": "60.003"
  //     },
  //     {
  //       "name": "网格中心点Z值",
  //       "value_max": "233.985",
  //       "value_min": "60.001"
  //     },
  //     {
  //       "name": "网格体积",
  //       "value_max": "211521.969",
  //       "value_min": "0.000"
  //     }
  //   ],
  //   "discretePropNameList": [
  //     {
  //       "id": 0,
  //       "name": "细分层编号"
  //     }
  //   ],
  //   "discretePropData": [
  //     {
  //       "name": "21",
  //       "volume": "32849.8625",
  //       "volProp": "0.0058"
  //     },
  //     {
  //       "name": "27",
  //       "volume": "19847.3601",
  //       "volProp": "0.0035"
  //     },
  //     {
  //       "name": "8",
  //       "volume": "417396.2376",
  //       "volProp": "0.0738"
  //     },
  //     {
  //       "name": "18",
  //       "volume": "1291633.8232",
  //       "volProp": "0.2284"
  //     },
  //     {
  //       "name": "14",
  //       "volume": "16060.8596",
  //       "volProp": "0.0028"
  //     },
  //     {
  //       "name": "22",
  //       "volume": "218064.0325",
  //       "volProp": "0.0386"
  //     },
  //     {
  //       "name": "13",
  //       "volume": "2410025.2773",
  //       "volProp": "0.4261"
  //     },
  //     {
  //       "name": "15",
  //       "volume": "403.6722",
  //       "volProp": "0.0001"
  //     },
  //     {
  //       "name": "12",
  //       "volume": "594473.4627",
  //       "volProp": "0.1051"
  //     },
  //     {
  //       "name": "10",
  //       "volume": "233127.1892",
  //       "volProp": "0.0412"
  //     },
  //     {
  //       "name": "11",
  //       "volume": "421546.2202",
  //       "volProp": "0.0745"
  //     },
  //     {
  //       "name": "26",
  //       "volume": "0.0000",
  //       "volProp": "0.0000"
  //     }
  //   ],
  //   "disProp": {
  //     "names_prop_f": [
  //       "细分层编号"
  //     ],
  //     "facies": [
  //       "12",
  //       "21",
  //       "27",
  //       "8",
  //       "18",
  //       "14",
  //       "22",
  //       "13",
  //       "15",
  //       "12",
  //       "10",
  //       "11",
  //       "26"
  //     ],
  //     "facies_volume": [
  //       "12",
  //       32849.862548828125,
  //       19847.36011505127,
  //       417396.23763275146,
  //       1291633.8232421875,
  //       16060.859619140625,
  //       218064.0325012207,
  //       2410025.27734375,
  //       403.6722412109375,
  //       594473.4627456665,
  //       233127.18915748596,
  //       421546.2201728821,
  //       1.1029075162732413e-24
  //     ],
  //     "facies_volume_per": [
  //       "12",
  //       0.005808554642441568,
  //       0.0035094355589808486,
  //       0.07380453571869976,
  //       0.22838834193525728,
  //       0.00283990170624594,
  //       0.03855836067660137,
  //       0.4261437469428911,
  //       0.00007137784114698615,
  //       0.1051155567761375,
  //       0.04122184727096752,
  //       0.07453834093063015,
  //       1.9501751534912196e-31
  //     ]
  //   }
  // }

  const { layerData } = res
  hasData.value = true
  tableData.value = layerData.map(item => {
    return {
      name: item.name,
      value: item.volume,
      rate: (parseFloat(item.volProp) * 100).toFixed(2) + '%'
    }
  });

  nextTick(() => {
    initChart(tableData.value);
  })
}

// 初始化图表
const initChart = (ldata) => {
  const data = ldata
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} 万方 ({d}%)",
    },
    legend: {
      type: 'scroll',
      orient: "vertical",
      left: "52%", // 靠右距离
      top: "middle", // 顶部对齐方式
      align: "left", // 文字左对齐
      verticalAlign: "middle", // 垂直居中
      itemWidth: 12, // 图例标记宽度
      itemHeight: 12, // 图例标记高度
      // 自定义图例格式，添加百分比
      // formatter: function (name) {
      //   const data = option.series[0].data;
      //   const total = data.reduce((sum, item) => sum + item.value, 0);
      //   const target = data.find((item) => item.name === name);
      //   const percent = ((target.value / total) * 100).toFixed(1) + "%";
      //   return `${name}(${percent})`; // 格式：名称 百分比
      // },
    },
    series: [
      {
        name: "储量",
        type: "pie",
        center: ["25%", "50%"], // 饼图中心位置（左半部分）
        radius: ["40%", "80%"], // 饼图内外半径
        itemStyle: {
          borderRadius: 4,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data
        // data: [
        //   {
        //     value: 28.2,
        //     name: "建筑用灰岩",
        //   },
        //   {
        //     value: 32.8,
        //     name: "电石用灰岩",
        //   },
        //   {
        //     value: 54.8,
        //     name: "溶剂用白云岩",
        //   },
        //   {
        //     value: 10.6,
        //     name: "水泥用灰岩",
        //   },
        // ],
      },
    ],
  };
  chartInstance.value.setOption(option);
};

onMounted(() => {
  // initChart();
});

const onClose = () => {
  emits("close");
};

watch(() => form.value.type, (newValue) => {
  console.log(newValue,'xxx');
  firstValue.value = '';
  twoFirstValue.value = '';
  twoSecondValue.value = '';
  tableData.value = [];
  hasData.value = false;
  chartInstance?.value?.clear();
  emits('loadModel', '');
}, {
  deep: true
});
</script>

<style lang="scss" scoped>
.chart {
  flex: 1;
}

.no-data-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100%;
}

.volume-calculation {
  background-color: transparent;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;

  .form-btns {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .sketch {
    margin-bottom: 16px;

    img {
      height: 120px;
      width: 100%;
      object-fit: cover;
    }

    .label {
      text-align: center;
      margin: 4px 0px 8px 0px;
      font-size: 12px;
    }
  }

  .el-form-item--default {
    margin-bottom: 12px;
  }

  .footer {
    margin-top: 12px;
  }

  .calc-result {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: -4px;

    .stratum-stats {
      flex: 1;

      &.table {
        flex: 1.4;
      }

      .title {
        font-size: 14px;
        color: #fff;
        line-height: 28px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        .unit {
          font-size: 12px;
        }
      }

      .chart-container {
        width: 320px;
        height: 100%;
        padding: 0 !important;
      }
    }
  }
}
</style>
